/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Rules necessary for styling welcome bar.
 */

.welcome {
	display: grid;
	position: relative; /* Positions close icon. */
}

.welcomeIcon {
	display: none;
}

.welcomeText {
	color: #ffffff;
	overflow: hidden; /* Facilitates the example buttons to "bleed" beyond the welcome text bounds. */
	padding: 24px 40px 20px;
}

.welcomeText h1 {
	margin: 16px 0 8px;
}

.welcomeText h2 {
	line-height: 20px;
	margin: 8px 0;
}

.welcomeExamples {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}

.welcomeExample {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	color: #ffffff;
	display: flex;
	gap: 8px;
	height: 56px;
	max-width: 264px;
	min-width: 264px;
	padding: 8px 12px;
	width: 100%;
}

.welcomeExample.hidden {
	display: none;
}

.welcomeExampleText {
	/* autoprefixer: off */
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
	display: -webkit-box;
	font-size: 14px;
	-webkit-line-clamp: 2;
	line-height: 20px;
	overflow: hidden;
}

.welcomeExampleIcon {
	font-size: 24px;
	margin-right: -4px;
	opacity: 0.38;
	transform: rotate(-90deg);
}

button.closeIcon {
	position: absolute;
	right: 10px;
	top: 10px;
}

/**
 * Large +
 */
@media screen and (min-width: 1440px) {
	.welcome {
		grid-template-columns: 476px 1fr;
	}

	.welcomeIcon {
		display: block;
		overflow: hidden;
		position: relative;
	}

	.imgXena {
		height: 100%;
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
		width: auto;
	}
}
